<!--
 @description 交接业务账号编辑/新增
 @fileName Item.vue
 @author zengqiongying
 @created 2023/04/28 14:36:41
-->
<template>
  <div>
    <Cell
      v-if="!hiddenColumn.includes('fromCustomerCode')"
      v-model="formData.fromCustomerCode"
      title="原商家客户编码"
      placeholder="请选择"
      required
      @right="onSearchCustomer"
    />
    <template v-if="formData.fromCustomerCode">
      <Cell
        v-if="!hiddenColumn.includes('fromCustomerName')"
        :modelValue="formData.fromCustomerName"
        title="原商家客户名称"
        placeholder="请选择"
        readonly
        required
        custom
      />
    </template>
    <Cell
      v-if="!hiddenColumn.includes('fromAccountCode')"
      v-model="formData.fromAccountCode"
      title="原业务账号编码"
      placeholder="请选择"
      required
      @right="onSearchAccount"
    />
    <template v-if="formData.fromAccountCode">
      <Cell
        v-if="!hiddenColumn.includes('fromAccountName')"
        :modelValue="formData.fromAccountName"
        title="原业务账号名称"
        placeholder="请选择"
        readonly
        required
        custom
      />
    </template>
    <!-- <Cell
      v-if="!hiddenColumn.includes('fromShopCode')"
      v-model="formData.fromShopCode"
      title="原门店编码"
      placeholder="请选择"
      required
      @right="onSearchShop"
    /> -->
    <template v-if="formData.fromShopCode && !hiddenColumn.includes('fromShopCode')">
      <Cell :modelValue="formData.fromShopCode" title="原门店编码" readonly required custom />
    </template>
    <FieldSelect
      v-if="!hiddenColumn.includes('fromShopName')"
      v-model="formData.fromShopCode"
      v-model:label="formData.fromShopName"
      title="原门店名称"
      placeholder="请输入"
      :url="`/app/v1/ctmCustomerShopBusiness/queryByAccountCode/${formData.fromAccountCode}`"
      label-name="name"
      value-name="code"
      method="get"
      mustPid
      :parentId="formData.fromAccountCode"
      :params="{ query: { status: 1 }, type: 1 }"
      clear
      required
    />
    <!-- 注：现业务账号需要在审核阶段才需要编辑 -->
    <!-- <FieldSelect
      v-model="formData.toAccountCode"
      v-model:label="formData.toAccountName"
      title="现业务账号编码"
      placeholder="请输入"
      :url="`/app/v1/mdmService/custDocDef/page`"
      label-name="name"
      value-name="code"
      method="post"
      mustPid
      mustVal
      :customerCode="customerCode"
      :params="{ query: { custDocCode: 'QY066' }, type: 0 }"
      clear
      required
    /> -->
    <FieldSelect
      v-model="formData.relationCode"
      v-model:label="formData.relationName"
      title="新老商家关系"
      :url="`/app/v1/mdmService/custDocDef/page`"
      label-name="name"
      value-name="code"
      method="post"
      :params="{ query: { custDocCode: 'QY066' }, type: 0 }"
      clear
      required
      @change="handleChangeRelation"
    />
    <FieldSelect
      v-model="formData.afterServiceAccount"
      v-model:label="formData.afterServiceAccountName"
      title="售后问题负责人"
      :url="`/app/v1/mdmService/custDocDef/page`"
      label-name="name"
      value-name="code"
      method="post"
      :params="{ query: { custDocCode: 'QY068' }, type: 0 }"
      clear
      required
    />
    <Cell
      v-model="formData.reason"
      title="交接原因"
      placeholder="请输入"
      :maxlength="11"
      :right="false"
      is-input
      required
      inputAlign="right"
    />

    <Cell title="销量是否转让" custom :right="false" required>
      <qmp-switch v-model="formData.isTransferSales" :disabled="formData.relationCode === '6'">
        <template #background>
          <span class="qmp-switch__background"> {{ formData.isTransferSales ? '是' : '否' }}</span>
        </template>
      </qmp-switch>
    </Cell>
    <FieldSelect
      v-model="formData.rebatepRoblem"
      v-model:label="formData.rebatepRoblemName"
      title="返利对象"
      :url="`/app/v1/mdmService/custDocDef/page`"
      label-name="name"
      value-name="code"
      method="post"
      :params="{ query: { custDocCode: 'QY067' }, type: 0 }"
      clear
      required
      :border="false"
    />
    <Cell title="是否延续促销活动" custom :right="false" required>
      <qmp-switch v-model="formData.isContinuePromotion">
        <template #background>
          <span class="qmp-switch__background"> {{ formData.isContinuePromotion ? '是' : '否' }}</span>
        </template>
      </qmp-switch>
    </Cell>
    <Cell title="余额是否转让" custom :right="false" required>
      <qmp-switch v-model="formData.isTransferBalance">
        <template #background>
          <span class="qmp-switch__background"> {{ formData.isTransferBalance ? '是' : '否' }}</span>
        </template>
      </qmp-switch>
    </Cell>
    <Cell title="经营保证金是否转让" custom :right="false" required>
      <qmp-switch v-model="formData.isTransferDeposit">
        <template #background>
          <span class="qmp-switch__background"> {{ formData.isTransferDeposit ? '是' : '否' }}</span>
        </template>
      </qmp-switch>
    </Cell>
  </div>
</template>

<script>
  import { reactive, toRefs, defineComponent, watch, getCurrentInstance } from 'vue'
  import Cell from '@/components/Cell/index.vue'
  import FieldSelect from '@/components/FieldSelect/index.vue'
  import { initFormData } from '@/utils'
  export default defineComponent({
    name: 'DealerCustomerHandoverItem',
    components: { Cell, FieldSelect },
    props: {
      modelValue: {
        type: Object,
        default: () => {}
      },
      hiddenColumn: {
        type: Array,
        default: () => []
      }
    },
    setup(props, { emit }) {
      const instance = getCurrentInstance()
      const { proxy } = instance
      const datas = reactive({
        formData: {
          fromCustomerCode: '', // 原商家客户编码
          fromCustomerName: '', //原商家客户名称
          fromAccountCode: '',
          fromAccountName: '', // 原业务账号
          toAccountCode: '',
          toAccountName: '', // 现业务账号
          fromShopCode: '',
          fromShopName: '', // 原门店
          relationCode: '',
          relationName: '', // 新老商家关系
          afterServiceAccount: '',
          afterServiceAccountName: '', // 售后负责人
          reason: '',
          isTransferSales: false,
          rebatepRoblem: '',
          rebatepRoblemName: '', // 返利对象
          isContinuePromotion: false,
          isTransferBalance: false,
          isTransferDeposit: false
        }
      })
      watch(
        () => props.modelValue,
        (d) => {
          initFormData(d, datas.formData)
        },
        {
          deep: true,
          immediate: true
        }
      )
      watch(
        () => datas.formData,
        (val) => {
          const d = { ...val }
          d.isContinuePromotion = d.isContinuePromotion ? 1 : 0
          d.isTransferBalance = d.isTransferBalance ? 1 : 0
          d.isTransferDeposit = d.isTransferDeposit ? 1 : 0
          d.isTransferSales = d.isTransferSales ? 1 : 0
          emit('update:modelValue', { ...props.modelValue, ...d })
        },
        {
          deep: true,
          immediate: true
        }
      )
      const onSearchAccount = () => {
        if ([null, undefined, ''].includes(datas.formData.fromCustomerCode)) {
          proxy.$toast('请先选择原商家客户编码')
          return
        }
        emit('search-account', datas.formData.fromCustomerCode)
      }
      const onSearchCustomer = () => {
        emit('search-customer')
      }
      const onSearchShop = () => {
        emit('search-shop')
      }

      const handleChangeRelation = (data) => {
        if (data.code === '6' && datas.formData.isTransferSales) {
          datas.formData.isTransferSales = false
        }
      }
      return {
        ...toRefs(datas),
        onSearchAccount,
        onSearchShop,
        onSearchCustomer,
        handleChangeRelation
      }
    }
  })
</script>
<style lang="less" scoped></style>
